<template>
<div>
    
    <div class="form">
        <div class="text">
            <h2>预约挂号</h2>
            <p>说明：请预约今天或以后的日期，当天的的预约不支持退款，如需退款趁早决定哦(今天的预约不支持退款，请慎重决定。)</p>
        </div>
        <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
            <div style="margin-left:50px;margin-top:10px">
                <span style="font-size:14px;color:#606266;margin-bottom:10px">姓名</span>
                <el-input
                    type="text"
                    placeholder="请先选择医生"
                    v-model="form2.Text"
                    style="width:200px;margin-left:10px"
                    >
                </el-input> 
            </div>
             <div style="margin-left:50px;margin-top:10px">
                <span style="font-size:14px;color:#606266;margin-bottom:10px">性别</span>
                <el-input
                    type="text"
                    placeholder="请先选择医生"
                    v-model="form2.Text"
                    style="width:200px;margin-left:10px"
                    >
                </el-input> 
            </div>
            <div style="margin-left:50px;margin-top:10px">
                <span style="font-size:14px;color:#606266;margin-bottom:10px">年龄</span>
                <el-input
                    type="text"
                    placeholder="请先选择医生"
                    v-model="form2.Text"
                    style="width:200px;margin-left:10px"
                    >
                </el-input> 
            </div>
            <el-form-item label="预约时间" required>
                <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align:center">~</el-col>
                <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="部门" prop="bumen">
                <el-select v-model="form.bumen" placeholder="请选择问诊部门" @change="oneNavChange">
                    <el-option :label="item.name" :value="item.name" v-for="(item,index) in form2.navOne" :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="科室" prop="keshi">
                <el-select v-model="form.keshi" placeholder="请选择问诊科室" @change="twoNavChange">
                    <el-option :label="item.name" :value="item.name" v-for="(item,index) in form2.navTwo" :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="医生" prop="doctor">
                <el-select v-model="form.doctor" placeholder="请选择问诊医生" @change="theNavChange">
                    <el-option :label="item.name" :value="item.name" v-for="(item,index) in form2.navThe" :key="index"/>
                </el-select>
            </el-form-item>
            <div class="price" style="margin-left:50px">
                <span style="font-size:14px;color:#606266">挂号费</span>
                <el-input
                    placeholder="请先选择医生"
                    v-model="form2.Price"
                    :disabled="true"
                    style="width:200px;margin-left:10px">
                </el-input>
            </div>
            <div style="margin-left:50px;margin-top:10px">
                <p style="font-size:14px;color:#606266;margin-bottom:10px">主治方向</p>
                <el-input
                    type="textarea"
                    placeholder="请先选择医生"
                    v-model="form2.Text"
                    :disabled="true"
                    autosize
                    style="width:400px;margin-left:10px"
                    >
                </el-input> 
            </div>
            <div class="button" style="text-align:center;margin-top:10px">
               <el-button type="success" size="small" style="width:80px;height:40px;">成功按钮</el-button>
            </div>
        </el-form>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                //form表单提交的数据
                date1:'',//年月日
                date2:'',//年月日时分秒
                bumen:'',//部门
                keshi:'',//科室
                doctor:'',//医生
                price:'',//价格
                text:''//主治
            },
            form2:{
                //需要请求的数据
                navOne:[//部门
                    {
                        name:'内科',
                        children:[
                            {
                                name:'呼吸内科',
                                children:[
                                    {
                                        name:'张三',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    },
                                    {
                                        name:'李四',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    }
                                ]
                            },
                            {
                                name:'消化内科',
                                children:[
                                    {
                                        name:'张三',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    },
                                    {
                                        name:'李四',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    }
                                ]
                            },
                            {
                                name:'神经内科',
                                children:[
                                    {
                                        name:'张三',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    },
                                    {
                                        name:'李四',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    }
                                ]
                            },
                            {
                                name:'心血管内科',
                                children:[
                                    {
                                        name:'张三',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    },
                                    {
                                        name:'李四',
                                        price:9.9,
                                        text:'从事妇产科临床工作28年，曾任妇产科学术带头人，积累了丰富的妇产科临床经验。能熟练处理妇产科领域中疑难病症，如妊娠高血压综合征预防、治疗'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name:'外科',
                        children:['普通外科','神经外科','心胸外科','泌尿外科','心血管外科']
                    }
                ],
                navTwo:[],//科室
                navThe:[],//医生
                Price:[],//价格
                Text:''//主治方向
            },
            
        }
    },
    methods:{
        oneNavChange(val){
            this.form.keshi = ''
            this.form.doctor = ''
            this.form2.navOne.map(item=>{
                if(val == item.name){
                    this.form2.navTwo = item.children
                }
            })
        },
        twoNavChange(val){
            this.form.doctor = ''
            this.form2.navTwo.map(item=>{
                if(val == item.name){
                    this.form2.navThe = item.children
                }
            })
        },
        theNavChange(val){
            this.form2.navThe.map(item=>{
                if(val == item.name){
                    this.form2.Price = item.price
                    this.form2.Text = item.text
                    this.form.text = item.text
                }
            })  
            console.log(this.form2.Price)
        },
    },
    watch:{
         date1(a,b){
            comsole.log(a,b)
        }
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
.text{
    margin-left: 15px;
}
.text h2{
    font-weight: normal;
    margin-bottom: 10px;
}
.text p{
    line-height: 20px;
    font-size: 12px;
    margin-bottom: 10px;
}
.form{
    padding: 10px 0;
    box-sizing: border-box;
    margin: 20px auto;
    width: 500px;
    border: 2px dashed darkorange;
}
.el-form-item{
    margin-bottom: 10px;
}
</style>